<template>
  <!-- 用户预约管理界面 -->
  <div class="margin-top">
    <!-- 预约信息列表 -->
    <el-table :data="reservations" style="width: 100%">
      <!-- 预约信息表格列 -->
      <el-table-column prop="id" label="预约编号"></el-table-column>
      <el-table-column prop="roomName" label="自习室名称"></el-table-column>
      <el-table-column prop="startTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="结束时间"></el-table-column>
      <el-table-column prop="reserveStatus" label="预约状态"></el-table-column>
      <el-table-column label="操作">
        <!-- 操作列，取消预约按钮 -->
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="cancelReservation(scope.row)">取消预约</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      reservations: [], // 预约信息列表
      uname: '' // 用户名
    };
  },
  async mounted () {
    // 在组件加载时获取用户名
    this.uname = localStorage.getItem('uname');
    // 获取用户的预约信息
    await this.fetchReservations();
  },
  methods: {
    // 获取用户的预约信息
    async fetchReservations () {
      try {
        const response = await axios.get(`http://localhost:7070/api/user/myreservation?Uname=${encodeURIComponent(this.uname)}`);
        this.reservations = response.data;
      } catch (error) {
        console.error('获取预约信息失败:', error);
      }
    },
    // 取消预约操作
    async cancelReservation (row) {
      try {
        // 弹出确认对话框
        const confirmResult = await this.$confirm('确定取消预约吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        if (confirmResult === 'confirm') {
          // 用户点击了确定，发送取消预约请求
          await axios.put(`http://localhost:7070/api/user/cancelReservation/${row.id}`);
          this.$message.success('取消预约成功'); // 显示成功提示
          await this.updateRoomCapacity(row.roomName); // 更新自习室剩余座位
          await this.fetchReservations(); // 刷新预约信息列表
        }
      } catch (error) {
        console.error('取消预约失败:', error);
        this.$message.error('取消预约失败'); // 显示失败提示
      }
    },
    // 更新自习室剩余座位
    async updateRoomCapacity (roomName) {
      try {
        await axios.put(`http://localhost:7070/api/user/cancelcapacity/${roomName}`);
      } catch (error) {
        console.error('更新自习室剩余座位失败:', error);
      }
    }
  }
};
</script>

<style scoped>
.margin-top {
  margin-top: 20px; /* 设置上边距为20像素 */
}
</style>
